<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.top-div{
				background-color: black;
				width: 1400px;
				height: 300px;
			}
			.dav1{
				width: 900px;
				height: 300px;
				margin: auto;
				background-color: black;
			}
			.top-div .top-smalldiv .topsmaldivleft span{
				float: right;
				margin: 20px;
				color: white;
			}
			.top-div .top-smalldiv .topsmaldivleft a{
				text-decoration: none;
				color: white;
			}
			.top-div .top-smalldiv .topsmaldivleft span:hover a{
				color: red;
			}
			.top-photo{
				width: 900px;
				height: 300px;
			}
			.top-font{
				text-align: center;
				margin-top: 150px;
				margin-bottom:50px ;
			}
			
			.top-font p{
				color:  dimgray;
			}
			.top-div2{
				width: 1400px;
				height: 500px;
				background-color: black;
			}
			.top-smalldiv2{
				background: url(img/yp_bg_03_02.gif);
				margin: auto;
				width: 900px;
				height: 500px;
				
			}
			 .div-c{
				width: 160px;
				height: 160px;
				color: white;
				text-align: center;
				float: left;
				border: 1px solid white;
				border-radius: 500px;
				font-size: 12px;
				padding: 20px;
				margin: 10px;
			}
			.div-a{
				color: red;
				float: left;
			}
			.div-b{
				color: ghostwhite;
				float: right;
				color: aliceblue;
				font-size: 12px;
				text-align: right;
			}
			#l{
				width: 900px;
				height: 100px;
				margin-top: 30px;
				margin-bottom:30px ;
			}
			.div-aa{
				padding: 50px 0px 50px 200px;
				margin-bottom: 30px;
			}
			.div-ac{
				text-align: center;
			}
			.acc{
				margin-right:30px ;
			}
			.div-ba{
				width: 900px;
				height: 200px;
				background-color: #cc0000;
				margin-left: 250px;
			}
			.div-bb{
				width: 250px;
				height: 70px;
				float: left;
				margin-top: 65px;
				margin-left: 40px;
			}
			.div-bb div,.div-bb span{
				float: left;
			}
			#baspan1{
				color: white;
				font-size: 25px;
				margin-left: 10px;
			}
			#baspan2{
				color:white;
				letter-spacing: 0px;
				margin-top: 3px;
				font-size: 5px;
			}
			
		</style>
	</head>
	<body>
		<div class="top-div">
			<div class="top-smalldiv">
				<div class="topsmaldivleft">
					<div class="dav1"><img src="img/yp_03.gif"/>
					<span class="span1"><a href="#">网站首页</a></span>
					<span class="span2"><a href="#">产品展示</a></span>
					<span class="span2"><a href="#">关于我们</a></span>
					<span class="span2"><a href="#">新闻中心</a></span>
					<span class="span2"><a href="#">联系我们</a></span>
					<br>
					<img src="img/yp_09.gif" class="top-photo"/>
					</div>
				</div>
			</div>
		</div>
		<div class="top-font">
			<h2>欢迎访问翠品建筑</h2>
			<p>翠品建筑是一家以建筑设计、室内设计、环境艺术设计为</p>
			<p>主的工业设计机构</p>
		</div>
		
		<div class="top-div2">
			<div class="top-smalldiv2">
				<div id="l">
					<div class="div-a">
						<img src="img/yp-icon_03.gif" />
						<h3>业务类型</h3>
					</div>
					
					<div class="div-b">
						<p>我们有最专业的建筑设计师，用最前卫的建筑设计风格</p>
						<p>用专注缔造不凡</p>
						<p>未来的建筑设计，属于羿品</p>
						
					</div>
				</div>
				
				<div class="div-c"><img src="img/yp-icon_07.gif"/>
				<h3>全案家居设计</h3>
				<p>国际化的家居设计品牌优势</p>
				<p>给您最好的体验</p></div>
				
				<div class="div-c"><img src="img/yp-icon_07.gif"/>
				<h3>全案家居设计</h3>
				<p>国际化的家居设计品牌优势</p>
				<p>给您最好的体验</p></div>
				
				<div class="div-c"><img src="img/yp-icon_07.gif"/>
				<h3>全案家居设计</h3>
				<p>国际化的家居设计品牌优势</p>
				<p>给您最好的体验</p></div>
				
				<div class="div-c"><img src="img/yp-icon_07.gif"/>
				<h3>全案家居设计</h3>
				<p>国际化的家居设计品牌优势</p>
				<p>给您最好的体验</p>
				</div>
			</div>
		</div>
		
		<div class="div-aa">
			<div>
				<img src="img/yp-icon_03.gif"/>
				<p>项目展示</p>
			</div>
			
			<div class="div-ab">
				
				<img src="img/xm_img_09.gif"/>
				
			</div>
			<div class="div-ac">
				<input type="image" src="img/icon-left.gif" class="acc" />
				<input type="image" src="img/icon-right.gif" />
			</div>
		</div>
		
		<div class="div-ba">
			
			<div class="div-bb">
				<div>
					<img src="img/icon_xx_17.gif"/>
				</div>
				<span id="baspan1">345</span>
				<br />
				<span id="baspan2">合作企业/Cooperative&nbsp;&nbsp;enterprise</span>	
			</div>
			
			<div class="div-bb">
				<div>
				    <img src="img/icon_xx_19.gif"/>
			    </div>
			<span id="baspan1">2156</span>
			<br /><br />
			<span id="baspan2">签约用户&nbsp;/Subscribers</span>
			</div>
			
			<div class="div-bb">
				<div>
				    <img src="img/icon_xx_21.gif"/>
			    </div>
			<span id="baspan1">100%</span>
			<br />
			<span id="baspan2">好评率/Good&nbsp;&nbsp;reputation</span>
			</div>
		</div>
	</body>
</html>
